<template>
	<view>
		<view class="user-wrap">
			<view class="config">
				<uni-icons type="gear" size="30" @click='toConfig'></uni-icons>
			</view>
			<view class='user-item' :class='[item.state?"":"disabled"]' @click='toChart(item)' v-for='item in userlist'
				:key='item.id'>
				<image class='avatar' mode="scaleToFill" :src="item.avatarUrl" @error="imageError"></image>
				<view class='user-right'>
					<text class='name'>{{item.name}}</text>
					<!-- 在线状态 -->
					<text v-if='item.state' class='state-point'></text>
					<text v-else class='stateText'>(离线)</text>
					<!-- <text class=lastMsg></text> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
				userlist: []

			}
		},
		computed: {
			userID() {
				let res = uni.getStorageSync('userInfo');
				return res?.id;
			}
		},
		methods: {
			imageError(e) {
				console.log('image--error---', e)
			},
			// 获取在线用户
			getUserList() {
				uni.request({
					url: getApp().globalData.BaseUrl + '/users/getUserList',
					method: 'get',
					success: (res) => {
						let {
							statusCode,
							errMsg,
							data
						} = res
						if (statusCode !== 200) {
							uni.showToast({
								title: errMsg,
								duration: 2000
							});
							return false
						}
						// 在线用户过滤：去除自身
						let list = res.data.filter((item) => {
							return item.id !== this.userID
						})
						this.userlist = list;
					},
					fail: (err) => {
						console.error(err);
					},
				});
			},
			toChart(user) {
				if (!user.state) {
					uni.showToast({
						title: '当前用户不在线',
						icon: 'error'
						//duration: 2000
					});
					return false

				}
				uni.navigateTo({
					url: '/pages/chart/chart',
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('linkman', {
							id: user.id,
							name: user.name
						})
					}
				})
			},
			toConfig(){
				uni.navigateTo({
					url:'/pages/selfConfig/selfConfig'
				})
			}

		},
		onLoad() {
			// console.log('onLoad-------')
			
			// 监听ws-消息
			uni.$on('onWSMessage', (data) => {
				// 监听用户上线.刷新联系人列表
				if (data.flag !== 'user_connect') {
					return false
				}
				this.getUserList();
			})
		},
		onShow(){
			// 每次进入页面刷新列表
			this.getUserList();
			// console.log('onShow--------')
		}
	}
</script>

<style lang="less" scoped>
	.config {
		display: flex;
		justify-content: flex-end;
		padding: 10px;
		background: #eee;
	}

	.user-wrap {
		background-color: #fff;
	}

	.user-item {
		&.disabled {
			cursor: not-allowed;
			background: #bbbbbb7a;
			border-bottom: 1px solid #fff;

			.avatar,
			.name {
				opacity: 0.5;
			}
		}

		display: flex;
		align-items: center;
		@height: 73px;
		//background: #e5e5e5;
		height: @height;
		//line-height: @height;
		border-bottom: 1px solid #ececec;

		.user-right {
			//	display: flex;
			//align-items: center;
			//flex-direction: column;
			// padding: 6px;

			.name {
				margin: 0px 0 0 10px;
				color: #000;
				font-size: 20px;
				//font-weight: bold;
			}

			.stateText {
				margin-left: 10px;
				/* margin-top: 10px; */
				color: #8f939c;
				font-size: 15px;
			}

			.state-point {
				display: inline-block;
				@size: 20rpx;
				width: @size;
				height: @size;
				border-radius: 50%;
				background: #18bc37;
				margin-left: 12rpx;
			}

			.name,
			.lastMsg {
				//	height: 20px;
			}
		}
	}
</style>